<template>
  <view class="container">
    <!-- 基本信息部分 -->
    <uni-section title="基本信息" :show="true" class="section" type="square" titleFontSize="22px">
      <view class="info-list">
        <view class="info-item">
          <text class="label">船舶名称:</text>
          <text class="value">{{ ship.name }}</text>
        </view>
        <view class="info-item">
          <text class="label">船舶代码:</text>
          <text class="value">{{ ship.code }}</text>
        </view>
        <view class="info-item">
          <text class="label">船舶航次:</text>
          <text class="value">{{ ship.voyage }}</text>
        </view>
		<view class="info-item">
		  <text class="label">驾驶台:</text>
		  <text class="value">{{ ship.jiashitai }}</text>
		</view>
        <view class="info-item">
          <text class="label">长:</text>
          <text class="value">{{ ship.length }}</text>
        </view>
        <view class="info-item">
          <text class="label">宽:</text>
          <text class="value">{{ ship.width }}</text>
        </view>
        <view class="info-item">
          <text class="label">形深:</text>
          <text class="value">{{ ship.depth }}</text>
        </view>
        <view class="info-item">
          <text class="label">配载要求:</text>
          <text class="value">{{ ship.loadRequirement }}</text>
        </view>
<!--        <view class="info-item">
          <text class="label">更新时间:</text>
          <text class="value">{{ ship.updateTime }}</text>
        </view> -->
      </view>
    </uni-section>

    <!-- 锁垫情况 -->
    <uni-section title="锁垫情况" :show="true" class="section" type="square" titleFontSize="22px">
      <view class="info-list">
        <view class="info-item">
          <text class="label">描述:</text>
          <text class="value">{{ lockPad.description }}</text>
        </view>
        <view class="info-item">
          <text class="label">隐患:</text>
          <text class="value">{{ lockPad.hazard }}</text>
        </view>
        <view class="info-item">
          <text class="label">措施:</text>
          <text class="value">{{ lockPad.measure }}</text>
        </view>
      </view>
    </uni-section>

    <!-- 加固绑扎 -->
    <uni-section title="加固绑扎" :show="true" class="section" type="square" titleFontSize="22px">
      <view class="info-list">
        <view class="info-item">
          <text class="label">描述:</text>
          <text class="value">{{ reinforce.description }}</text>
        </view>
        <view class="info-item">
          <text class="label">隐患:</text>
          <text class="value">{{ reinforce.hazard }}</text>
        </view>
        <view class="info-item">
          <text class="label">措施:</text>
          <text class="value">{{ reinforce.measure }}</text>
        </view>
      </view>
    </uni-section>
	
	<uni-section title="甲板情况" :show="true" class="section" type="square" titleFontSize="22px">
	  <view class="info-list">
	    <view class="info-item">
	      <text class="label">描述:</text>
	      <text class="value">{{ deck.description }}</text>
	    </view>
	    <view class="info-item">
	      <text class="label">隐患:</text>
	      <text class="value">{{ deck.hazard }}</text>
	    </view>
	    <view class="info-item">
	      <text class="label">措施:</text>
	      <text class="value">{{ deck.measure }}</text>
	    </view>
	  </view>
	</uni-section>
	
	<uni-section title="垫子框情况" :show="true" class="section" type="square" titleFontSize="22px">
	  <view class="info-list">
	    <view class="info-item">
	      <text class="label">描述:</text>
	      <text class="value">{{ gearbox.description }}</text>
	    </view>
	    <view class="info-item">
	      <text class="label">隐患:</text>
	      <text class="value">{{ gearbox.hazard }}</text>
	    </view>
	    <view class="info-item">
	      <text class="label">措施:</text>
	      <text class="value">{{ gearbox.measure }}</text>
	    </view>
	  </view>
	</uni-section>
	
	<uni-section title="加固平台情况" :show="true" class="section" type="square" titleFontSize="22px">
	  <view class="info-list">
	    <view class="info-item">
	      <text class="label">描述:</text>
	      <text class="value">{{ jiagupingtai.description }}</text>
	    </view>
	    <view class="info-item">
	      <text class="label">隐患:</text>
	      <text class="value">{{ jiagupingtai.hazard }}</text>
	    </view>
	    <view class="info-item">
	      <text class="label">措施:</text>
	      <text class="value">{{ jiagupingtai.measure }}</text>
	    </view>
	  </view>
	</uni-section>
	
	<uni-section title="船梯情况" :show="true" class="section" type="square" titleFontSize="22px">
	  <view class="info-list">
	    <view class="info-item">
	      <text class="label">描述:</text>
	      <text class="value">{{ ladder.description }}</text>
	    </view>
	    <view class="info-item">
	      <text class="label">隐患:</text>
	      <text class="value">{{ ladder.hazard }}</text>
	    </view>
	    <view class="info-item">
	      <text class="label">措施:</text>
	      <text class="value">{{ ladder.measure }}</text>
	    </view>
	  </view>
	</uni-section>
	
	<uni-section title="贝位情况" :show="true" class="section" type="square" titleFontSize="22px">
	  <view class="info-list">
	    <view class="info-item">
	      <text class="label">描述:</text>
	      <text class="value">{{ bay.description }}</text>
	    </view>
	    <view class="info-item">
	      <text class="label">隐患:</text>
	      <text class="value">{{ bay.hazard }}</text>
	    </view>
	    <view class="info-item">
	      <text class="label">措施:</text>
	      <text class="value">{{ bay.measure }}</text>
	    </view>
	  </view>
	</uni-section>
	
	<uni-section title="舱内情况" :show="true" class="section" type="square" titleFontSize="22px">
	  <view class="info-list">
	    <view class="info-item">
	      <text class="label">描述:</text>
	      <text class="value">{{ cabin.description }}</text>
	    </view>
	    <view class="info-item">
	      <text class="label">隐患:</text>
	      <text class="value">{{ cabin.hazard }}</text>
	    </view>
	    <view class="info-item">
	      <text class="label">措施:</text>
	      <text class="value">{{ cabin.measure }}</text>
	    </view>
	  </view>
	</uni-section>

    <!-- 导槽情况 -->
    <uni-section title="导槽情况" :show="true" class="section" type="square" titleFontSize="22px">
      <view class="info-list">
        <view class="info-item">
          <text class="label">描述:</text>
          <text class="value">{{ guideSlot.description }}</text>
        </view>
        <view class="info-item">
          <text class="label">隐患:</text>
          <text class="value">{{ guideSlot.hazard }}</text>
        </view>
        <view class="info-item">
          <text class="label">措施:</text>
          <text class="value">{{ guideSlot.measure }}</text>
        </view>
      </view>
    </uni-section>

    <!-- 舱盖情况 -->
    <uni-section title="舱盖情况" :show="true" class="section" type="square" titleFontSize="22px">
      <view class="info-list">
        <view class="info-item">
          <text class="label">描述:</text>
          <text class="value">{{ hatchCover.description }}</text>
        </view>
        <view class="info-item">
          <text class="label">隐患:</text>
          <text class="value">{{ hatchCover.hazard }}</text>
        </view>
        <view class="info-item">
          <text class="label">措施:</text>
          <text class="value">{{ hatchCover.measure }}</text>
        </view>
      </view>
    </uni-section>

    <!-- 其他情况 -->
    <uni-section title="其他情况" :show="true" class="section" type="square" titleFontSize="22px">
      <view class="info-list">
        <view class="info-item">
          <text class="label">描述:</text>
          <text class="value">{{ other.description }}</text>
        </view>
      </view>
    </uni-section>

    <!-- 更改记录 -->
    <uni-section title="更改记录" :show="true" class="section" type="square" titleFontSize="22px">
      <view class="timeline">
		  <uni-steps :options="changeRecords" direction="column"></uni-steps>
      </view>
    </uni-section>
	<button @click="changeShip" class="button">修改</button>
  </view>
</template>

<script>
import common from  "../common/js/common.js";
export default {
  data() {
    return {
	  ship_id: -1,
      ship: {
        name: '',
        code: '',
        voyage: '',
        length: '',
        width: '',
        depth: '',
		jiashitai:'',
        loadRequirement: '',
        updateTime: ''
      },
      lockPad: {
        description: '',
        hazard: '',
        measure: ''
      },
	  
	  
	  deck: {
	    description: '',
	    hazard: '',
	    measure: ''
	  },
	  gearbox: {
	    description: '',
	    hazard: '',
	    measure: ''
	  },
	  jiagupingtai: {
	    description: '',
	    hazard: '',
	    measure: ''
	  },
	  ladder: {
	    description: '',
	    hazard: '',
	    measure: ''
	  },
	  bay: {
	    description: '',
	    hazard: '',
	    measure: ''
	  },
	  cabin: {
	    description: '',
	    hazard: '',
	    measure: ''
	  },
	  
	  
      reinforce: {
        description: '',
        hazard: '',
        measure: ''
      },
      guideSlot: {
        description: '',
        hazard: '',
        measure: ''
      },
      hatchCover: {
        description: '',
        hazard: '',
        measure: ''
      },
      other: {
        description: ''
      },
      changeRecords: [
		  {
				title: '高师傅（审核通过）',
				desc: '2024-12-26 16:00',
		  },

      ]
    };
  },
    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
  		this.ship_id = option.ship_id //打印出上个页面传递的参数。
		var Url = common.baseurl + '/api/ship/info?ship_id=' + option.ship_id
		uni.request({
				url: Url,
				method:'GET',
			}).then(data=>{
				if(undefined != data[1].data.errCode){
					uni.showToast({
					          title: data[1].data.errMsg,
					          icon: 'none',
					        });
				}else{
					console.info(data[1].data)
					// this.ships = data[1].data,
					this.ship_id= data[1].data.ship_info._id
					this.ship= data[1].data.ship_info.ship
					this.lockPad= data[1].data.ship_info.lockPad
					
					
					this.deck=data[1].data.ship_info.deck
					this.gearbox=data[1].data.ship_info.gearbox
					this.jiagupingtai=data[1].data.ship_info.jiagupingtai
					this.ladder= data[1].data.ship_info.ladder
					this.bay=data[1].data.ship_info.bay
					this.cabin= data[1].data.ship_info.cabin
					this.reinforce=data[1].data.ship_info.reinforce 
					this.guideSlot=data[1].data.ship_info.guideSlot 
					this.hatchCover=data[1].data.ship_info.hatchCover
					this.other= data[1].data.ship_info.other
					
					this.changeRecords = data[1].data.ship_logs
				}
		
			}).catch(()=>{
		  
			})
	},
	methods: {
		changeShip(){
			console.log("111"+ uni.getStorageSync('userInfo'));
			const userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			if (!userInfo) {
			  // 如果没有用户信息，跳转到登录页面
			  uni.redirectTo({
			    url: '/pages/login'
			  });
			}else{
					  this.userInfo = userInfo;
			}
			// alert(this.ship_id)
			uni.navigateTo({
				url: "add_ship?ship_id=" + this.ship_id
			});
		},
	}
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f4f4f4;
}

.section {
  margin-bottom: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.info-list {
  padding: 15px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.label {
  font-size: 14px;
  color: #555;
}

.value {
  font-size: 14px;
  color: #333;
}

.timeline {
  padding: 15px;
  position: relative;
}

.timeline-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  position: relative;
}

.timeline-dot {
  width: 10px;
  height: 10px;
  background-color: #007aff;
  border-radius: 50%;
  position: absolute;
  left: -15px;
}

.timeline-content {
  flex: 1;
  padding-left: 20px;
  border-left: 2px solid #007aff;
}

.timeline-label {
  font-size: 14px;
  color: #555;
}
.button {
  background-color: #007AFF;
  color: white;
  border-radius: 5px;
  font-size: 16px;
  border: none;
}
</style>
